<template>
    <div class="popup-mask" @click.self="handleMaskClick">
      <div
        class="popup-wrapper"
        :style="{ width: width + 'px', height: height + 'px' }"
      >
        <div class="popup-header">
          <span class="popup-title">{{ title }}</span>
          <span class="popup-close" @click="$emit('close')">✖</span>
        </div>
        <component :is="componentInstance" class="popup-body" />
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, watch, defineAsyncComponent } from 'vue'
  
  const props = defineProps<{
    visible: boolean
    title: string
    componentName: string // 只传入如 'Belt2_2_N.vue' 即可
    width?: number
    height?: number
  }>()
  
  const emit = defineEmits(['close'])
  
  // 异步组件加载逻辑
  const componentInstance = ref<any>(null)
  const modules = import.meta.glob('@/components/windows/**/*.vue')
  
  watch(

    () => props.componentName,
    async (newPath) => {
      const fullPath = `/src/components/windows/BeltConter/${newPath}.vue`
      if (modules[fullPath]) {
        componentInstance.value = defineAsyncComponent(modules[fullPath])
      } else {
        console.warn(`组件未找到: ${fullPath}`)
        componentInstance.value = null
      }
    },
    { immediate: true }
    
  )
  
  // 点击遮罩层空白区域关闭
  const handleMaskClick = () => {
    emit('close')
  }
  </script>
  
  <style scoped>
  .popup-mask {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .popup-wrapper {
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid #0ff;
    border-radius: 16px;
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    padding: 16px;
    display: flex;
    flex-direction: column;
  }
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    color: rgb(255, 183, 0);
    font-weight: bold;
    border-bottom: 1px solid #0ff;
    margin-bottom: 8px;
  }
  
  .popup-close {
    color: rgb(255, 0, 0);
    cursor: pointer;
  }
  
  .popup-body {
    flex: 1;
  }
  </style>
  